<template>
  <el-dialog :title="info.isadd ? '添加商品分类' : '编辑商品分类'" :visible.sync="info.isshow" center :before-close="cancel">
    <el-form :model="cateinfo" :rules="rules" ref="form">
      <el-form-item label="上级分类" label-width="120px" prop="pid">
        <el-select v-model="cateinfo.pid" placeholder="请选择">
          <el-option label="顶级分类" :value="0"></el-option>
          <el-option
            v-for="item in get_cateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" label-width="120px" prop="catename">
        <el-input v-model="cateinfo.catename"></el-input>
      </el-form-item>
      <el-form-item label="图片" label-width="120px" v-if="cateinfo.pid !== 0">
        <!-- 上传图片 -->
        <!-- action:上传地址，我们是要发请求上传 用# 
             list-type：文件列表的类型
             auto-upload：自动上传 默认是true

             on-preview：点击文件列表中已上传的文件时的钩子 
             on-remove：文件列表移除文件时的钩子   
             on-change:文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
        -->
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :file-list='filelist'
          :on-preview="onpreview"
          :on-remove="onremove"
          :on-change="onchange"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" :append-to-body="true">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>

      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="cateinfo.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cateadd, cateinfo, cateedit } from "@/request/api.js";
import { mapGetters, mapActions } from "vuex";
export default {
  props: ["info"],
  data() {
    return {
      // 数据
      cateinfo: {
        pid: "", //上级分类编号，顶级分类为0
        catename: "", //商品
        img: "", //图片(文件，一般用于二级分类)
        status: 1 //状态            1正常2禁用
      },
      //表单验证规则
      rules: {
        catename: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" }
        ],
        pid: [{ required: true, message: "请选择上级编号", trigger: "change" }]
      },
      dialogVisible:false,  //控制预览弹框的变量
      dialogImageUrl:"", //预览的图片地址
      filelist:[], //用于回显数据的
    };
  },
  computed: {
    ...mapGetters({
      get_cateList: "cate/get_cateList"
    })
  },
  methods: {
    ...mapActions({
      action_cateList: "cate/action_cateList"
    }),
    //1.取消  -- 通知父组件，关闭弹框
    cancel() {
      this.$emit("cancel");
      this.reset();
    },
    //2.重置
    reset() {
      //数据重置
      this.cateinfo = {
        pid: "", //上级分类编号，顶级分类为0
        catename: "", //商品
        img: "", //图片(文件，一般用于二级分类)
        status: 1 //状态            1正常2禁用
      };
      //验证重置
      this.$refs.form.resetFields();
      this.filelist = [];
    },
    //2.点击确定
    sure() {
      //通过验证才能往下操作
      this.$refs.form.validate(async val => {
        if (!val) {
          return;
        }

        //添加
        if (this.info.isadd) {
          try {
            //发起请求
            let res = await cateadd(this.cateinfo);
            if (res.code == 200) {
              //提示，关闭弹框，页面发生变化
              this.$message.success(res.msg);
              this.cancel();
              this.action_cateList();
            } else {
              this.$message.info(res.msg);
            }
          } catch (err) {
            this.$message.error(err);
          }
        } else {
          try {
            //发起请求
            let res = await cateedit(this.cateinfo);
            console.log(this.userinfo);
            if (res.code == 200) {
              //提示，关闭弹框，页面发生变化
              this.$message.success(res.msg);
              this.cancel();
              this.action_cateList();
            } else {
              this.$message.info(res.msg);
            }
          } catch (err) {
            this.$message.error(err);
          }
        }
      });
    },

    //3.数据回显
    async lookup(id) {
      try {
        let res = await cateinfo({ id });
        if (res.code == 200) {
          this.cateinfo = res.list;
          this.cateinfo.id = id;
          //图片的数据回显
          this.filelist = [{name:"x.jpg",url: this.$baseUrl + res.list.img}]

        }
      } catch (err) {
        this.$message.error(err);
      }
    },

    //-------图片上传-------
    //预览
    onpreview(file){
      this.dialogImageUrl = file.url
      this.dialogVisible = true;
    },
    onremove(){
      this.dialogImageUrl = ""; //用于在预览中显示
      this.cateinfo.img = ""; //用于上传的图片文件
    },
    onchange(file, fileList){
      // console.log("更新");
      console.log(file);
      console.log(fileList);
      
      this.dialogImageUrl = file.url; //用于在预览中显示
      this.cateinfo.img = file.raw; //用于上传的图片文件
    }
  }
};
</script>
<style>
</style>